<template>
    <div class="ibox">
        <div class="ibox-content product-box">
            <div class="product-imitation material-news-body">
                <!--图文素材-->
                <div v-if="materialData.type=='news'" v-for="(item2, index2) in materialData.preview_data" v-bind:class="[index2 == 0 ? 'material-news-content' : 'material-news-lists-box']">
                    <!--第一篇文章-->
                    <div v-if="index2==0" class="material-news-desc">
                        <p class="material-news-desc-sp">{{ item2.title ? item2.title : '标题' }}</p></div>
                    <img v-if="index2==0" class="material-news-img" v-show="item2.thumb_view_url" :src="item2.thumb_view_url + '?imageView2/0/w/500/h/500'">
                    <!--其他-->
                    <div v-if="index2!=0" class="col-md-9 material-news-title-box">
                        {{ item2.title ? item2.title : '标题' }}
                    </div>
                    <div v-if="index2!=0" class="col-md-3 material-news-img-box">
                        <img class="material-news-lists-img" v-show="item2.thumb_view_url" :src="item2.thumb_view_url + '?imageView2/0/w/500/h/500'">
                    </div>
                </div>
                <!--图片素材-->
                <div v-if="materialData.type=='image' || materialData.type=='thumb'" class="product-imitation material-news-body">
                    <img class="material-news-img" v-show="materialData.view_url" :src="materialData.view_url + '?imageView2/0/w/500/h/500'">
                </div>
                <!--语音素材-->
                <div v-if="materialData.type=='voice'" class="product-imitation material-news-body" v-show="materialData.view_url">
                    <plyr>
                        <audio>
                            <source :src="materialData.view_url" allowfullscreen />
                        </audio>
                    </plyr>
                </div>
                <!--视频素材-->
                <div v-if="materialData.type=='video'" class="product-imitation material-news-body" v-show="materialData.view_url">
                    <plyr>
                        <video>
                            <source :src="materialData.view_url" allowfullscreen />
                        </video>
                    </plyr>
                </div>
            </div>
            <div class="product-desc material-news-item-type2">
                <div class="small m-t-xs">
                    <p v-show="['image','voice','video'].includes(materialData.type)">名称:{{ materialData.title }}</p>
                    <p v-show="['image','voice','video'].includes(materialData.type) && materialData.description">描述:{{ materialData.description }}</p>
                    <p v-show="['image','voice','video'].includes(materialData.type) && materialData.wx_view_url">微信地址：<a target="_blank" :href="materialData.wx_view_url">点击跳转</a> </p>
                    <p>状态:{{ materialData.media_id ? '已上传' : '未上传' }}</p>
                    <p>所属分类：{{ materialData.category ? materialData.category.name : '未定义' }}</p>
                    <p>素材类型：{{ materialData.is_forever ? '永久素材' : '临时素材' }}</p>
                    <p v-show="isEdit && materialData.push_time">最后推送时间：{{ materialData.push_time }}</p>
                    <p v-show="isEdit && materialData.push_result" style="color: red;">推送结果：{{ materialData.push_result }}</p>
                    <p v-show="isEdit && materialData.updated_at">最后更新时间：{{ materialData.updated_at }}</p>
                </div>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
    //视频播放器
    import VuePlyr from 'vue-plyr';
    import 'vue-plyr/dist/vue-plyr.css';
    Vue.use(VuePlyr)

    export default {
        name: "MaterialPreview",
        props:{
            'materialData':{//预览数据
                type: Object,
                default: {},
            },
            'isEdit':{
                type:Boolean,
                default:false,
            },
        },
        watch:{
            materialData:function (val) {
            }
        },
    }
</script>

<style scoped>
    .material-news-body {
        /*border: 1px solid rgb(231, 231, 235);*/
        text-align: left;
        color: rgb(34, 34, 34);
        padding: 10px;
        /*margin: 0px 10px 0px 0px;*/
        background-color:#FFFFFF;
    }
    .material-news-item-type2 {
        text-align: left;
        padding: 0px 10px 10px 10px;
    }
    .material-news-desc {
        bottom: 10px;
        position: absolute;
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        color: #ffffff;
        width: 100%;
        bottom: 0;
        height: 42px;
    }
    .material-news-img {
        width: 100%;
        height: 180px;
    }
    .material-news-img-box {
        float: right;
        padding: 0px;
    }
</style>